<template>
  <view v-if="pageShow" class="page"
    :class="bgTabVal==2?'fullsize noRepeat':bgTabVal==1?'repeat ysize':'noRepeat ysize'"
    :style="'background-color:'+bgColor+';background-image: url('+bgPic+');min-height:'+windowHeight+'px;'">
    <view v-if="!errorNetwork" :style="colorStyle">
      <skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
        bgcolor="#FFF"></skeleton>
      <view class="index skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
        <!-- #ifdef H5 -->
        <view v-for="(item, index) in styleConfig" :key="index">
          <component :is="item.name" :index="index" :dataConfig="item" @changeBarg="changeBarg" @changeTab="changeTab"
            :tempArr="tempArr" :iSshowH="iSshowH" @detail="goDetail" :isSortType="isSortType" @bindSortId="bindSortId"
            @bindHeight="bindHeight" :isFixed="isFixed">
          </component>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP || APP-PLUS -->
        <!-- <block v-for="(item, index) in styleConfig" :key="index">
					
					<headerSerch v-if="item.name == 'headerSerch'" ></headerSerch>
					
				</block> -->
        <!-- #endif -->

        <view class="container">
          <!-- 背景图片 -->
          <image class="background-image"
            src="https://sp.x-fmt.com//uploads/attach/2025/08/20250813/475c967611a79279c4d2cab5d2255ad9.png"
            mode="widthFix" @load="onImageLoad" :style="{height: imageHeight + 'px'}"></image>

          <!-- 绝对定位的按钮容器 -->
          <view class="button-overlay">
            <button class="btn btn-image btn-left" style="width: 216rpx;height: 92rpx;border-radius:10rpx;"
              @click="toDetail(goods_details_c)">
              <image class="btn-bg"
                src="https://sp.x-fmt.com//uploads/attach/2025/07/20250724/7f283145f3c8dc8f8a90cd086d1b33ac.png"
                mode="aspectFill"></image>
              <text class="btn-text"></text>
            </button>
            <button class="btn btn-image btn-right" style="width: 382rpx;height: 92rpx;border-radius:10rpx;"
              @click="showModal = true">
              <image class="btn-bg"
                src="https://sp.x-fmt.com//uploads/attach/2025/07/20250724/52f99fad28467f3df8d8961cfb57621f.png"
                mode="aspectFill"></image>
              <text class="btn-text"></text>
            </button>
          </view>
        </view>

        <!-- 核心配方 -->
        <view class="container" style="margin-top: 87rpx;margin-bottom: 67rpx;">
          <!-- 背景图片 -->
          <image class="background-image"
            src="https://sp.x-fmt.com//uploads/attach/2025/07/20250724/a41b7cd822951741d60197d7543232fc.png"
            mode="widthFix" style="margin-left: 50rpx;width: 65%;"></image>
        </view>

        <!-- 抖动大图 -->
        <view class="container_scroll" style="padding: 0;">
          <!-- 横向滚动容器 -->
          <scroll-view class="scroll-container" scroll-x="true" :show-scrollbar="false">
            <!-- 图片列表 -->
            <view class="image-list">
              <view v-for="(item, index) in imageList" :key="index" class="image-wrapper">
                <image lazy-load class="image-item" :src="item" mode="aspectFill"
                  style="width: 364rpx;height: 555rpx;" />
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 立即体验 按钮 -->
        <view class="container-but" style="padding-top: 118rpx;">
          <!-- 固定宽度图片按钮 -->
          <view class="btnText">
            <view class="button" @click="toDetail(goods_details_c)">立即体验</view>
          </view>
        </view>

        <!-- 专家共识 -->
        <view class="section bg-grey">
			<view class="title">专家共识</view>
			<view class="sub-title">Expert Consensus</view>
			<view class="container_scroll" style="margin-left: 20rpx;padding: 50rpx 0;">
			  <media-slider :list="mediaList" ref="mediaSlider" />
			</view>
		</view>

        <!-- 用户反馈 -->
        <view class="container" style="width: 40%;margin-top: 100rpx;margin-bottom: 39rpx;">
          <!-- 背景图片 -->
          <image class="background-image"
            src="https://sp.x-fmt.com//uploads/attach/2025/07/20250724/fb1d102b44b68c23387ee068c21aff05.png"
            mode="widthFix" style="margin-left: 50rpx;width: 65%;"></image>
        </view>
        <view class="container_scroll" style="margin-bottom: 85rpx;">
          <!-- 横向滚动容器 -->
          <scroll-view class="scroll-container" scroll-x="true" :show-scrollbar="false">
            <!-- 图片列表 -->
            <view class="image-list">
              <view v-for="(item, index) in imageList_fk" :key="index" class="image-wrapper">
                <image lazy-load class="image-item" :src="item" mode="aspectFill"
                  style="width: 640rpx;height: 921rpx;margin-right:22rpx;" />
              </view>
            </view>
          </scroll-view>
        </view>

        <view style="background-color: #f6f6f8;">
          <!-- 人体生态 -->
          <view class="container" style="width: 100%;padding-top: 69rpx;padding-bottom: 54rpx;">
            <!-- 背景图片 -->
            <image class="background-image"
              src="https://sp.x-fmt.com//uploads/attach/2025/07/20250724/2fb87101113f55ce15953ab163136835.png"
              mode="widthFix" style="margin-left: 50rpx;width: 65%;"></image>
          </view>
          <view class="container_scroll" style="padding-bottom: 50rpx;">
            <view style="margin-left: 50rpx;">
              <image-swiper :images="imageList_st" :img-height="862" />
            </view>
          </view>
        </view>

		<!-- 基于循证医学的功效研究 -->
		<view class="yanjiu">
			<image class="background-image" src="https://sp.x-fmt.com//uploads/attach/2025/08/20250813/bca47bd3283adea4ef6e40068d4954e1.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		
		<!-- 解决方案 -->
        <view class="section bg-grey">
			<view class="title">解决方案</view>
			<view class="sub-title">solution</view>
          <view style="padding: 0 20rpx;">
			  <image class="background-image" src="https://sp.x-fmt.com//uploads/attach/2025/08/20250813/e8f0ae2d271392fa545e4d3e7c529df7.png" mode="widthFix" style="width: 100%;margin-top:50rpx;"></image>
		  </view>
          <view class="container-but" style="width: auto;padding: 55rpx 0;">
            <!-- 按钮 我的顾问 -->
            <view class="btnText">
              <view class="button" @click="showModal = true">我的顾问</view>
            </view>
          </view>
		</view>

		<view>
			<view class="container" style="width: 100%;padding: 50rpx 0;">
				<!-- 背景图片 -->
				<image class="background-image"
				  src="https://sp.x-fmt.com//uploads/attach/2025/07/20250728/0c9fb7b108b665bc0ce74676a0909b73.png"
				  mode="widthFix" style="margin-left: 50rpx;width: 55%;"></image>
			</view>
			<view style="background-color: #fff;">
				<image class="background-image"
				  src="https://sp.x-fmt.com//uploads/attach/2025/08/20250804/1d0266fb6c9e70c8bdaaa991ce9c24dd.png"
				  mode="widthFix" style="width: 650rpx; margin: 20rpx 50rpx;"></image>

				<view class="container-but" style="width: auto;padding: 45rpx 0;">
				  <!-- 立即体验 -->
				  <view class="btnText">
					<view class="button" @click="toDetail(goods_details_c)">立即体验</view>
				  </view>
				</view>
			</view>
          </view>

			<!-- 关于兴生命 -->
			<view class="bg-grey" style="padding: 0 0 50rpx 50rpx;">
				<image class="background-image"
				  src="https://sp.x-fmt.com//uploads/attach/2025/07/20250724/ebe0dc23b516ee508440f628815e1b11.png"
				  mode="widthFix" style="width: 700rpx;"></image>
			</view>

          <view style="margin-top: 100rpx;">
            <view class="container" style="width: 100%;margin-top: 50rpx;">
              <!-- 背景图片 -->
              <image class="background-image"
                src="https://sp.x-fmt.com//uploads/attach/2025/07/20250725/7d61fed241ec658e782a1d80ecdd74f4.png"
                mode="widthFix" style="margin-left: 50rpx;width: 65%;"></image>
            </view>

            <view style="margin-top: 30rpx;">
              <!-- 公众号列表 -->
              <view v-for="(item, index) in officialAccounts" :key="index" class="account-item">

                <image class="background-image" :src="item.img" mode="widthFix"
                  style="width: 650rpx;margin: 30rpx 50rpx;" @click="jumpToArticle(item.link)"></image>

              </view>
            </view>

            <view class="container-but" style="width: auto;padding: 0;">
              <!-- 按钮 黑杠杠 -->
              <view class="image-btn-container" style="width: 100%;">
                <image style="width: 650rpx;margin: 40rpx 50rpx;height: 24rpx;"
                  src="https://sp.x-fmt.com//uploads/attach/2025/07/20250725/8c96225af588722f3f6c332d66d0e81f.png"
                  mode="widthFix" />
              </view>
            </view>
          </view>

        <!-- #ifndef H5 -->
        <pageFoot></pageFoot>
        <!-- #endif -->
      </view>
    </view>
    <view v-else>
      <view class="error-network">
        <image :src="imgHost + '/statics/images/error-network.png'"></image>
        <view class="title">{{$t(`网络连接断开`)}}</view>
        <view class="con">
          <view class="label">{{$t(`请检查情况：`)}}：</view>
          <view class="item">· {{$t(`在设置中是否已开启网络权限：`)}}</view>
          <view class="item">· {{$t(`当前是否处于弱网环境`)}}</view>
          <view class="item">· {{$t(`版本是否过低，升级试试吧`)}}</view>
        </view>
        <view class="btn" @click="reconnect">{{$t(`重新连接`)}}</view>
      </view>
    </view>
    <!-- #ifdef APP-PLUS -->
    <app-update v-if="!privacyStatus" ref="appUpdate" :force="true" :tabbar="false"></app-update>
    <view class="privacy-wrapper" v-if="privacyStatus">
      <view class="privacy-box">
        <view class="title">{{$t(`服务协议与隐私政策`)}}</view>
        <view class="content">
          {{$t(`请务必审慎阅读、充分理解“服务协议与 隐私政策”各条款，包括但不限于：为了 向你提供即时通讯、内容分享等服务，我 们需要收集你的设备信息、操作日志等个 人信息。你可以在“设置”中查看、变更、删除个人信息并管理你的授权。`)}}<br>
          {{$t(`你可以阅读`)}}
          <navigator url="/pages/users/privacy/index?type=3">{{$t(`《服务协议与隐私政策》`)}}</navigator>
          {{$t(`了解详细信息。如你同意，请点击“我同意”开始接受我们的服务。`)}}
        </view>
        <view class="btn-box">
          <view class="btn-item" @click="confirmApp">{{$t(`我同意`)}}</view>
          <view class="btn" @click="closeModel">{{$t(`残忍拒绝`)}}</view>
        </view>
      </view>
    </view>
    <!-- #endif -->

    <image-modal :show.sync="showModal" :imageUrl="qrcodeImage" bgi="2" @close="onModalClose" />
    <view class="uni-p-b-98"></view>
  </view>
</template>

<script>
  const app = getApp();
  import colors from "@/mixins/color";
  import couponWindow from '@/components/couponWindow/index';
  import {
    getCouponV2,
    getCouponNewUser,
    siteConfig
  } from '@/api/api.js';
  // #ifdef H5
  import mConfig from './components/index.js';
  // #endif
  // #ifdef MP || APP-PLUS
  import authorize from '@/components/Authorize';
  import activeParty from './components/activeParty';
  import headerSerch from './components/header';
  import swipers from './components/swipers';
  import coupon from './components/coupon';
  import articleList from './components/articleList';
  import bargain from './components/bargain';
  import blankPage from './components/blankPage';
  import combination from './components/combination';
  import customerService from './components/customerService';
  import goodList from './components/goodList';
  import guide from './components/guide';
  import liveBroadcast from './components/liveBroadcast';
  import menus from './components/menus';
  import news from './components/news';
  import pictureCube from './components/pictureCube';
  import promotionList from './components/promotionList';
  import richText from './components/richText';
  import seckill from './components/seckill';
  import swiperBg from './components/swiperBg';
  import tabNav from './components/tabNav';
  import titles from './components/titles';
  import hotspot from './components/hotspot.vue';
  import appUpdate from "@/components/update/app-update.vue";
  import {
    getTempIds
  } from '@/api/api.js';
  import {
    SUBSCRIBE_MESSAGE,
    TIPS_KEY
  } from '@/config/cache';

  // #endif
  import {
    mapGetters
  } from 'vuex';
  import {
    getDiy,
    getIndexData
  } from '@/api/api.js';
  import {
    getGroomList,
    getCategoryList,
    getProductslist,
    getProductHot
  } from '@/api/store.js';
  import {
    getIndexPageData
  } from '@/api/page.js';
  import {
    goShopDetail
  } from '@/libs/order.js';
  import {
    getCartCounts,
  } from '@/api/order.js';
  import {
    toLogin
  } from '@/libs/login.js';
  import {
    HTTP_REQUEST_URL
  } from '@/config/app';
  import pageFoot from '@/components/pageFooter/index.vue';
  import Loading from '@/components/Loading/index.vue';
  import recommend from '@/components/recommend';
  import ImageSwiper from '@/components/imageSwiper/index.vue'
  import ImageModal from '@/components/image-modal.vue';
  import MediaSlider from '@/components/media-slider.vue'


  export default {
    computed: mapGetters(['isLogin', 'uid']),
    mixins: [colors],
    components: {
      recommend,
      Loading,
      pageFoot,
      couponWindow,
      // #ifdef H5
      ...mConfig,
      // #endif
      // #ifdef MP || APP-PLUS
      authorize,
      activeParty,
      headerSerch,
      swipers,
      coupon,
      articleList,
      bargain,
      blankPage,
      combination,
      customerService,
      goodList,
      guide,
      liveBroadcast,
      menus,
      pictureCube,
      news,
      promotionList,
      richText,
      seckill,
      swiperBg,
      tabNav,
      titles,
      hotspot,
      appUpdate, //APP更新
      // #endif
      ImageSwiper,
      ImageModal,
      MediaSlider,
    },
    computed: mapGetters(['isLogin', 'cartNum']),
    data() {
      return {
        imgHost: HTTP_REQUEST_URL,
        showSkeleton: true, //骨架屏显示隐藏
        isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
        styleConfig: [],
        tempArr: [],
        goodType: 3,
        loading: false,
        page: 1,
        limit: this.$config.LIMIT,
        iSshowH: false,
        numConfig: 0,
        code: '',
        isCouponShow: false,
        couponObj: {},
        couponObjs: {
          show: false
        },
        shareInfo: {},
        footConfig: {},
        isSortType: 0,
        sortList: '',
        sortAll: [],
        goodPage: 1,
        goodList: [],
        newData: {},
        sid: 0,
        curSort: 0,
        sortMpTop: 0,
        loaded: false,
        hostProduct: [],
        hotScroll: false,
        hotPage: 1,
        hotLimit: 10,
        domOffsetTop: 50,
        // #ifdef APP-PLUS || MP
        isFixed: true,
        // #endif

        // #ifdef H5
        isFixed: false,
        // #endif
        site_config: '',
        errorNetwork: false, // 是否断网
        privacyStatus: false, // 隐私政策是否同意过
        isHeaderSerch: false,
        bgColor: '',
        bgPic: '',
        bgTabVal: '',
        pageShow: true,
        windowHeight: 0,
        activeRouter: '',
        countNum: 0,
        imageHeight: 300, // 默认高度，图片加载后会更新
        // 示例图片列表，替换为你的实际图片URL

        showModal: false,
        qrcodeImage: "https://sp.x-fmt.com//uploads/attach/2025/08/20250805/bf52dfb14a6d663806916e2000e6a7c6.jpg", // 替换为你的二维码图片URL

        imageList: [],
        imageList_fk: [],
        imageList_st: [
          'https://sp.x-fmt.com//uploads/attach/2025/08/20250804/8b649be0af8a523745748372bd3c882e.png'
        ],
        officialAccounts: [],
        goods_details_a: '0',
        goods_details_b: '0',
        goods_details_c: '0',
        scrollTop: 0,
        windowHeight: 0,
        isOverOneScreen: false,
        mediaList: []
      };
    },

    created(options) {
      let that = this
      this.$nextTick(function() {
        uni.getSystemInfo({
          success: function(res) {
            that.windowHeight = res.windowHeight;
          }
        });
      })
      let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
      let curRoute = routes[routes.length - 1].route //获取当前页面路由
      this.activeRouter = '/' + curRoute
      // #ifdef APP-PLUS
      uni.setStorageSync("privacyStatus", true);
      // #endif
      this.diyData();
      this.getIndexData();
      // #ifdef MP
      this.getTempIds();
      // #endif
      // #ifndef APP-PLUS
      siteConfig().then(res => {
        this.site_config = res.data
      }).catch(err => {
        console.error(err.msg);
      });
      // #endif



      getIndexPageData().then(res => {
        let data = res.data;
        // this.qrcodeImage = data.qrcode;
        this.imageList = data.image_list;
        this.mediaList = data.mediaList;
        this.imageList_fk = data.image_list_fk;
        this.officialAccounts = data.more;
        this.goods_details_a = data.goods_details_a;
        this.goods_details_b = data.goods_details_b;
        this.goods_details_c = data.goods_details_c;
      })

    },
    watch: {
      isLogin: {
        deep: true, //深度监听设置为 true
        handler: function(newV, oldV) {
          // 优惠券弹窗
          var newDates = new Date().toLocaleDateString();
          if (newV) {
            try {
              var oldDate = uni.getStorageSync('oldDate') || '';
            } catch {}
            if (oldDate != newDates) {
              this.getCoupon();
            }
          }
        }
      }
    },
    onReady() {},
    // onPullDownRefresh() {
    // 	this.diyData();
    // },
    methods: {

      // 一键复够
      handleButton1() {
        uni.showToast({
          title: '点击了按钮1',
          icon: 'none'
        });
      },
      // 私人顾问
      handleButton2() {
        uni.showToast({
          title: '点击了按钮2',
          icon: 'none'
        });
      },
      // 	立即体验
      handleClick() {
        uni.showToast({
          title: '按钮被点击',
          icon: 'none'
        })
        // 这里可以替换为你的业务逻辑
      },
      onImageLoad(e) {
        const {
          width,
          height
        } = e.detail
        uni.getSystemInfo({
          success: (res) => {
            this.imageHeight = height * (res.screenWidth / width)
          }
        })
      },
      // 图片预览
      previewImage(index) {
        uni.previewImage({
          current: this.imageList[index],
          urls: this.imageList
        })
      },
      // 跳转到指定文章
      jumpToArticle(link) {
        //#ifdef MP-WEIXIN
        wx.openOfficialAccountArticle({
          url: link, // 此处填写公众号文章连接
          success: res => {},
          fail: res => {}
        })
        //#endif  
        //#ifdef H5 || APP-PLUS
        uni.navigateTo({
          url: '/pages/webview/webview?url=' + encodeURIComponent(link)
        });
        //#endif 

      },
      onModalClose() {
        console.log("弹窗已关闭");
        // 可以在这里执行关闭后的逻辑
      },

      // #ifdef APP-PLUS
      // 同意隐私协议
      confirmApp() {
        uni.setStorageSync('privacyStatus', true)
        this.privacyStatus = false
      },
      // 关闭Model
      closeModel() {
        //退出app
        uni.getSystemInfo({
          success: function(res) { // 判断为安卓的手机 
            if (res.platform == 'android') { // 安卓退出app      
              plus.runtime.quit();
            } else { // 判断为ios的手机，退出App      
              plus.ios.import("UIApplication").sharedApplication().performSelector("exit");

            }
          }
        })
      },
      // #endif
      // 重新链接
      reconnect() {
        uni.showLoading({
          title: this.$t(`加载中`)
        })
        this.diyData();
        this.getIndexData();
        getShare().then(res => {
          this.shareInfo = res.data;
        });
      },
      goICP(type) {
        let url = type == 1 ? this.site_config.icp_url : this.site_config.network_security_url;
        window.open(url);
      },
      bindHeighta(data) {
        // #ifdef APP-PLUS
        this.sortMpTop = data.top + data.height;
        // #endif
      },
      bindHeight(data) {
        uni.hideLoading();
        this.domOffsetTop = data.top;
      },
      // 去商品详情
      goGoodsDetail(item) {
        goShopDetail(item, this.uid).then(res => {
          uni.navigateTo({
            url: `/pages/goods_details/index?id=${item.id}`
          });
        });
      },
      /**
       * 获取我的推荐
       */
      get_host_product: function() {
        let that = this;
        if (that.hotScroll) return;
        getProductHot(that.hotPage, that.hotLimit).then(res => {
          that.hotPage++;
          that.hotScroll = res.data.length < that.hotLimit;
          that.hostProduct = that.hostProduct.concat(res.data);
          // that.$set(that, 'hostProduct', res.data)
        });
      },
      // 分类点击
      changeSort(item, index) {
        if (this.curSort == index) return;
        this.curSort = index;
        this.sid = item.id;
        this.goodList = [];
        this.goodPage = 1;
        this.loaded = false;
        this.getGoodsList();
      },
      // 获取分类id
      bindSortId(data) {
        this.isSortType = data == -99 ? 0 : 1;
        this.getProductList(data);
        if (this.hostProduct.length == 0) {
          this.get_host_product();
        }
      },
      getProductList(data) {
        let tempObj = '';
        this.curSort = 0;
        this.loaded = false;
        if (this.sortAll.length > 0) {
          this.sortAll.forEach((el, index) => {
            if (el.id == data) {
              this.$set(this, 'sortList', el);
              this.sid = el.children.length ? el.children[0].id : '';
            }
          });
          this.goodList = [];
          this.goodPage = 1;
          this.$nextTick(() => {
            if (this.sortList != '') this.getGoodsList();
          });
        } else {
          getCategoryList().then(res => {
            this.sortAll = res.data;
            res.data.forEach((el, index) => {
              if (el.id == data) {
                this.sortList = el;
                this.sid = el.children.length ? el.children[0].id : '';
              }
            });
            this.goodList = [];
            this.goodPage = 1;

            this.$nextTick(() => {
              if (this.sortList != '') this.getGoodsList();
            });
          });
        }
      },
      getGoodsList() {
        if (this.loading || this.loaded) return;
        this.loading = true;
        getProductslist({
          sid: this.sid,
          keyword: '',
          priceOrder: '',
          salesOrder: '',
          news: 0,
          page: this.goodPage,
          limit: 10,
          cid: this.sortList.id
        }).then(res => {
          this.loading = false;
          this.loaded = res.data.length < 10;
          this.goodPage++;
          this.goodList = this.goodList.concat(res.data);
        });
      },
      // 新用户优惠券
      getNewCoupon() {
        const oldUser = uni.getStorageSync('oldUser') || 0;
        if (!oldUser) {
          getCouponNewUser().then(res => {
            const {
              data
            } = res;
            if (data.show) {
              if (data.list.length) {
                this.isCouponShow = true;
                this.couponObj = data;
                uni.setStorageSync('oldUser', 1);
              }
            } else {
              uni.setStorageSync('oldUser', 1);
            }
          });
        }
      },
      // 优惠券弹窗
      getCoupon() {
        const tagDate = uni.getStorageSync('tagDate') || '',
          nowDate = new Date().toLocaleDateString();
        if (tagDate === nowDate) {
          this.getNewCoupon();
        } else {
          getCouponV2().then(res => {
            const {
              data
            } = res;
            if (data.list.length) {
              this.isCouponShow = true;
              this.couponObj = data;
              uni.setStorageSync('tagDate', new Date().toLocaleDateString());
            } else {
              this.getNewCoupon();
            }
          });
        }
      },
      // 优惠券弹窗关闭
      couponClose() {
        this.isCouponShow = false;
        if (!uni.getStorageSync('oldUser')) {
          this.getNewCoupon();
        }
      },
      onLoadFun() {},
      // #ifdef H5
      // 获取url后面的参数
      getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var reg_rewrite = new RegExp('(^|/)' + name + '/([^/]*)(/|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        var q = window.location.pathname.substr(1).match(reg_rewrite);
        if (r != null) {
          return unescape(r[2]);
        } else if (q != null) {
          return unescape(q[2]);
        } else {
          return null;
        }
      },
      // #endif

      // #ifdef MP
      getTempIds() {
        getTempIds().then(res => {
          if (res.data) wx.setStorageSync(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
        });
      },
      // #endif
      // 对象转数组
      objToArr(data) {
        let obj = Object.keys(data);
        let m = obj.map(key => data[key]);
        return m;
      },
      diyData() {
        let that = this;
        getDiy(0).then(res => {
          uni.hideLoading()
          uni.setStorageSync('DIY_DATA', res.data)
          setTimeout(() => {
            this.isNodes++;
          }, 0);
          this.errorNetwork = false
          let data = res.data;
          if (data.is_bg_color) {
            this.bgColor = data.color_picker
          }
          if (data.is_bg_pic) {
            this.bgPic = data.bg_pic
            this.bgTabVal = data.bg_tab_val
          }
          this.pageShow = data.is_show
          uni.setNavigationBarTitle({
            title: this.$t(res.data.title)
          });
          let temp = [];
          let lastArr = that.objToArr(res.data.value);
          lastArr.forEach((item, index, arr) => {
            if (item.name == 'headerSerch') {
              this.isHeaderSerch = true
              item.title = res.data.title;
            }
            if (item.name == 'promotionList') {
              that.numConfig = item.numConfig.val;
              that.goodType = item.tabConfig.list[0].link.activeVal;
              that.getGroomList();
            }
            temp = arr;
          });

          function sortNumber(a, b) {
            return a.timestamp - b.timestamp;
          }
          temp.sort(sortNumber)
          that.styleConfig = temp;
          setTimeout(() => {
            this.showSkeleton = false
          }, 300)
          uni.stopPullDownRefresh({
            success: (e) => {},
          });
        }).catch(error => {
          // #ifdef APP-PLUS
          if (error.status) {
            uni.hideLoading()
            if (that.errorNetwork) {
              uni.showToast({
                title: this.$t(`连接失败`),
                icon: 'none',
                duration: 2000
              })
            }
            this.errorNetwork = true
            this.showSkeleton = false;
          }
          // #endif
        });

      },
      getIndexData() {},
      changeBarg(item) {
        if (!this.isLogin) {
          toLogin();
        } else {
          uni.navigateTo({
            url: `/pages/activity/goods_bargain_details/index?id=${item.id}&bargain=${this.$store.state.app.uid}`
          });
        }
      },
      // 促销列表的点击事件；
      changeTab(type) {
        this.goodType = type;
        this.page = 1;
        let onloadH = true;
        this.getGroomList(onloadH);
      },
      // 精品推荐
      getGroomList(onloadH) {
        let that = this;
        let type = that.goodType;
        if (that.loadend) return false;
        if (that.loading) return false;
        if (onloadH) {
          that.$set(that, 'iSshowH', true);
        }
        getGroomList(type, {
            page: that.page,
            limit: this.numConfig
          })
          .then(({
            data
          }) => {
            that.$set(that, 'iSshowH', false);
            let list = data.list
            that.$set(that, 'tempArr', data.list);
            that.loading = false;
          })
          .catch(res => {});
      },
      goRouter(item) {
        var pages = getCurrentPages();
        var page = (pages[pages.length - 1]).$page.fullPath;
        if (item.link == page) return
        uni.switchTab({
          url: item.link,
          fail(err) {
            uni.redirectTo({
              url: item.link
            })
          }
        })
      },
      goDetail(item) {
        goShopDetail(item, this.$store.state.app.uid).then(res => {
          uni.navigateTo({
            url: `/pages/goods_details/index?id=${item.id}`
          });
        });
      },
      toDetail(id) {
        uni.navigateTo({
          url: `/pages/goods_details/index?id=${id}`
        });
      },
      onsollBotton() {
        if (this.isSortType == 0) {
          // this.getGroomList();
        } else {
          this.getGoodsList();
        }
      }
    },

    onReachBottom: function() {

    },
    onPageScroll(e) {
      uni.$emit('scroll');
      // #ifdef H5
      if (this.isHeaderSerch) {
        if (e.scrollTop > this.domOffsetTop) {
          this.isFixed = true;
        }
        if (e.scrollTop < this.domOffsetTop) {
          this.$nextTick(() => {
            this.isFixed = false;
          });
        }
      } else {
        this.isFixed = false
      }
      // #endif
    },
    //#ifdef MP
    onShareAppMessage() {
      return {
        title: this.shareInfo.title,
        path: '/pages/index/index'
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: this.shareInfo.title,
        imageUrl: this.shareInfo.img
      };
    }
    //#endif
  };
</script>

<style lang="scss">
  // 居中按钮
  .container-but {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;
  }

  /* 图片按钮容器 */
  .image-btn-container {
    width: 319rpx;
    /* 固定宽度 */
    height: auto;
    /* 高度自适应 */
  }

  .btnText {
    width: 396rpx;
    height: 94rpx;
	border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 38rpx;
    background-color: #000;
  }

  /* 图片按钮样式 */
  .image-btn {
    width: 100%;
    /* 继承容器宽度 */
    height: auto;
    /* 高度自适应 */
    // border-radius: 16rpx; /* 圆角 */
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    transition: transform 0.2s;
    /* 点击动画 */
  }

  /* 点击效果 */
  .btnText:active {
    transform: scale(0.98);
    /* 点击时轻微缩小 */
    opacity: 0.9;
    /* 点击时透明度变化 */
  }

  // 滑动图

  .container_scroll {
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
  }

  /* 横向滚动容器 */
  .scroll-container {
    width: 100%;
    white-space: nowrap;
    /* 防止换行 */
  }

  /* 图片列表容器 */
  .image-list {
    margin-left: 50rpx;
    display: inline-block;
    /* 横向排列 */
    font-size: 0;
    /* 解决inline-block间隙问题 */
  }

  /* 图片包裹容器 */
  .image-wrapper {
    display: inline-block;
    vertical-align: middle;
  }

  /* 单个图片样式 */
  .image-item {
    width: 355rpx;
    /* 图片宽度 */
    min-width: 156px;
    min-height: 240px;
    height: 435rpx;
    /* 固定高度 */
    margin-right: 10px;
    /* 图片间距 */
    border-radius: 8px;
    /* 圆角 */
    padding: 5rpx;
  }

  /* 最后一个图片不需要右边距 */
  .image-wrapper:last-child .image-item {
    margin-right: 0;
  }

  //

  .container {
    position: relative;
    // min-height: 100vh;
  }

  .background-image {
    width: 100%;
    display: block;
  }

  /* 覆盖在图片上的按钮容器 */
  .button-overlay {
    position: absolute;
    bottom: 100rpx;
    /* 距离图片底部距离 */
    left: 0;
    right: 0;
    padding: 0 50rpx;
    display: flex;
    flex-direction: row;
    /* 改为横向排列 */
    justify-content: space-between;
    /* 按钮之间平均分布 */
    gap: 52rpx;
    z-index: 10;
  }

  .btn {
    position: relative;
    width: 320rpx;
    /* 设置固定宽度 */
    height: 90rpx;
    // border-radius: 45rpx;
    font-size: 32rpx;
    overflow: hidden;
    /* 确保背景图片不超出按钮边界 */
    padding: 0;
    background-color: transparent;
    border: none;
  }

  .btn-image {
    position: relative;
  }

  .btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .btn-text {
    position: relative;
    z-index: 1;
    color: #fff;
    /* 假设按钮文字是白色 */
    font-size: 32rpx;
  }

  button::after {
    border: none;
  }

  // 

  .pictrue_log_class {
    background-color: var(--view-theme);
  }

  .page {
    // padding-bottom: 50px;
    background-color: white;
    box-sizing: border-box;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .ysize {
    background-size: 100%;
  }

  .fullsize {
    background-size: 100% 100%;
  }

  .repeat {
    background-repeat: repeat;
  }

  .noRepeat {
    background-repeat: no-repeat;
  }

  .privacy-wrapper {
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #7F7F7F;


    .privacy-box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 560rpx;
      padding: 50rpx 45rpx 0;
      background: #fff;
      border-radius: 20rpx;

      .title {
        text-align: center;
        font-size: 32rpx;
        text-align: center;
        color: #333;
        font-weight: 700;
      }

      .content {
        margin-top: 20rpx;
        line-height: 1.5;
        font-size: 26rpx;
        color: #666;

        navigator {
          display: inline-block;
          color: #E93323;
        }
      }

      .btn-box {
        margin-top: 40rpx;
        text-align: center;
        font-size: 30rpx;

        .btn-item {
          height: 82rpx;
          line-height: 82rpx;
          background: linear-gradient(90deg, #F67A38 0%, #F11B09 100%);
          color: #fff;
          border-radius: 41rpx;
        }

        .btn {
          padding: 30rpx 0;
        }
      }
    }
  }

  .error-network {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-top: 40rpx;
    background: #fff;

    image {
      width: 414rpx;
      height: 336rpx;
    }

    .title {
      position: relative;
      top: -40rpx;
      font-size: 32rpx;
      color: #666;
    }

    .con {
      font-size: 24rpx;
      color: #999;

      .label {
        margin-bottom: 20rpx;
      }

      .item {
        margin-bottom: 20rpx;
      }
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 508rpx;
      height: 86rpx;
      margin-top: 100rpx;
      border: 1px solid #D74432;
      color: #E93323;
      font-size: 30rpx;
      border-radius: 120rpx;
    }
  }

  .sort-product {
    margin-top: 20rpx;

    .sort-box {
      display: flex;
      width: 100%;
      border-radius: 16rpx;
      padding: 30rpx 0;

      .sort-item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        image {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
        }

        .txt {
          color: #272727;
          font-size: 24rpx;
          margin-top: 10rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 140rpx;
          text-align: center;
        }

        .pictrues {
          width: 90rpx;
          height: 90rpx;
          background: #f8f8f8;
          border-radius: 50%;
          margin: 0 auto;
        }

        .icon-gengduo1 {
          color: #333;
        }

        &.on {
          .txt {
            color: #fc4141;
          }

          image {
            border: 1px solid #fc4141;
          }
        }
      }
    }

    .product-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 30rpx;
      padding: 0 20rpx;

      .product-item {
        position: relative;
        width: 344rpx;
        background: #fff;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: column;

        image {
          width: 100%;
          height: 344rpx;
          border-radius: 10rpx 10rpx 0 0;
        }

        .info {
          flex: 1;
          padding: 14rpx 16rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 28rpx;
          }

          .price-box {
            font-size: 34rpx;
            font-weight: 700;
            margin-top: 8px;
            color: #fc4141;

            text {
              font-size: 26rpx;
            }
          }
        }
      }
    }
  }

  .emptyBox {
    text-align: center;
    padding-top: 20rpx;

    .tips {
      color: #aaa;
      font-size: 26rpx;
      padding-bottom: 20rpx;
    }

    image {
      width: 414rpx;
      height: 304rpx;
    }
  }

  .site-config {
    margin-top: 40rpx;
    font-size: 24rpx;
    text-align: center;
    color: #666;

    &.fixed {
      position: fixed;
      bottom: 69px;
      left: 0;
      width: 100%;
    }
  }
  
  .section {
	  .title {
		  font-size: 44rpx;
		  color: #000;
		  padding-left: 50rpx;
		  padding-top: 50rpx;
	  }
	  .sub-title {
		  font-size: 22rpx;
		  color: #3D3D3D;
		  margin-top: 30rpx;
		  padding-left: 50rpx;
	  }
  }
  
  .bg-grey {
	  background-color: #E0E0E0;
  }
  
  .yanjiu {
  	  padding: 50rpx;
  	  background-color: #fff;
  }
</style>